<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
			}
			
			#box {
				width: 1000px;
				height: 500px;
				position: relative;
			}
			
			.xt {
				float: left;
				width: 300px;
				height: 230px;
				border: 1px solid #333;
				position: relative;
			}
			
			.xt img {
				width: 300px;
				height: 230px;
			}
			
			.df {
				width: 400px;
				height: 300px;
				position: relative;
				left: 20px;
				float: left;
				display: none;
				border: 1px solid #333333;
				overflow: hidden;
			}
			
			.dt {
				width: 500px;
				height: 400px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			
			.xf {
				background: palegoldenrod;
				opacity: .5;
				display: none;
				position: absolute;
				left: 0px;
				top: 0px;
				
			}
			#xBox{
				width: 300px;
				height: 60px;
				position: absolute;
				left: 0px;
				bottom: 200px;
			}
		#xBox .momepic {
				width: 265px;
				height: 60px;
				position: absolute;
				left: 15px;
				overflow: hidden;
			}
			
			.momepic ul {
				position: absolute;
				left:0px;
			/*	z-index: -99;*/
				float: left;
			
			}
			
			.momepic ul li {
				float: left;
				width: 60px;
				height: 60px;
				margin-left: 5px;
			}
			
			.momepic ul li img {
				width: 60px;
				height: 60px;
			}
			
			#left {
				position: absolute;
				left: 0px;
				float: left;
				top: 50%;
				color: #333;
				display: none;
				width: 10px;
				height: 30px;
				background: #FFFFFF;
				margin-top: -10px;
				z-index: 99;
			}
			#right{
				position: absolute;
				right: 0px;
				float: left;
				top: 50%;
				display: block;
				color: #333;
				width: 10px;
				height: 30px;
				background: #FFFFFF;
				margin-top: -10px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div class="xt">
				<img src="img/12.jpg" />
				<div class="xf"></div>
			</div>
			<div class="df">
				<img src="img/12.jpg" class="dt" />
			</div>
			<div id="xBox">
				<button id="left">&lt;</button>
				<div class="momepic">
					<ul>
						<li><img src="img/12.jpg" </li>
						<li><img src="img/13.jpg" </li>
						<li><img src="img/14.jpg" </li>
						<li><img src="img/16.jpg" </li>
						<li><img src="img/18.jpg" </li>
						<li><img src="img/19.jpg" </li>
						<li><img src="img/4.jpg" </li>
						<li><img src="img/8.jpg" </li>
						<li><img src="img/9.jpg" </li>
					</ul>

				</div>
				<button id="right">&gt;</button>
			</div>
		</div>
		<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			$('.xt').mouseover(function(ev){
				$(this).find('.xf').css('display','block');
				$('.df').css('display','block');
				var $wid=($('.df').width()*$('.xt').width())/$('.dt').width();
				var $hei=($('.df').height()*$('.xt').height())/$('.dt').height();
				var $scale=$('.dt').width()/$('.xt').width();
				
			    $('.xf').css('width',$wid+'px');
			    $('.xf').css('height',$hei+'px');
				$(document).mousemove(function(ev){
					var $x=ev.clientX-$('.xt').width()/2;
					var $y=ev.clientY-$('.xt').height()/2;

					if($x<0){
						$x=0;
					}else if($x>=$('.xt').width()-$('.xf').width()){
						$x=$('.xt').width()-$('.xf').width();
					}
					if($y<0){
						$y=0;
					}else if($y>=$('.xt').height()-$('.xf').height()){
						$y=$('.xt').height()-$('.xf').height();
					}
					$('.xf').css({
						left:$x,
						top:$y
					});
					$('.dt').css({
						left:-$scale*$x,
						top:-$scale*$y
					})					
				})
				$(document).mouseout(function(){
					$('.xf').css('display','none');
					$('.df').css('display','none');
				})
				return false;
			})
			
		        $('.momepic ul li').each(function(){
		        	$(this).click(function(){
		    		$('.xt').find('img')[0].src=$(this).find('img')[0].src;
		    		$('.dt')[0].src=$(this).find('img')[0].src;		    		
		    	})
		        });
		        
		        var $wid=$('.momepic ul li').width()*($('.momepic ul li').size()+1);
		        $('.momepic ul').css('width',$wid+'px');
		        var num=1;
		     $('#right').on('click',function(){
		     	if(num>=1){
		     		$('#left').css('display','block');
		     	}
		     	num++
		     	//alert(num)
		     	$('.momepic ul').css('left',-65*(num-1)+'px')		     	
		     	if(num==6){
		     		$('#right').css('display','none');		     		
		     	}	     	
		     });
		     
		   $('#left').on('click',function(){
		     	num--
		     	$('#right').css('display','block');	
		     	$('.momepic ul').css('left',-65*(num-1)+'px');
		     	
		     	if(num<=1){
		     	$('#left').css('display','none');		     		
		     	}
		     })
		</script>
	</body>

</html>